<template>
	<view>
		<view class="wrap">
			<view class="search-code">
				<image src="../../../static/tab/saoma.svg" mode="widthFix"></image>
			</view>
			<view class="search" @click="gotosearch">
				<image src="../../../static/tab/sousuo.svg" mode="widthFix" class="search-img"></image>
				<input type="text" value="" disabled="true" />
			</view>
			<view>
				<image src="../../../static/tab/xiaoxi.svg" mode="widthFix" class="xiaoxi-img"></image>
			</view>
		</view>
		<!-- lunbo -->
		<view>
			<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="2000" :duration="500">
				<swiper-item v-for="(item,index) in banner" :key="index">
					<view class="swiper-item uni-bg-red"><image :src="item.img" mode="aspectFill" class="swiper-img"></image></view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			banner:Array
		},
		data(){
			return{
				
			}
		},
		methods:{
			gotosearch(){
				wx.navigateTo({
					url:'../searchHome/searchHome'
				})
			}
		}
	}
</script>

<style scoped>
	.wrap {
		display: flex;
		background-image: linear-gradient(to top, #ffe566 10%, #ffd300 100%);
		padding-bottom: 30upx;
		justify-content: center;
		align-items: center;
	}

	.search-code {
		width: 50upx;
		height: 50upx;
		padding: 0 15upx;
	}

	.search-code image {
		width: 50upx;
		height: 50upx;
	}

	.search-img {
		margin: auto 0 auto 20upx;
		width: 40upx;
		height: 40upx;
	}

	.search {
		height: 70upx;
		line-height: 70upx;
		width: 100%;
		display: flex;
		background-color: #fff7d4;
		border-radius: 40px;
		margin: 0 3upx 0 3upx;
	}

	.search input {
		font-size: 30upx;
		width: 100%;
		height: 70upx;
	}

	.xiaoxi-img {
		width: 50upx;
		height: 50upx;
	}
	.swiper-img{
		width: 100%;
		height: 300upx!important;
	}
	swiper{
		height: 300upx!important;
	}
</style>
